/**
 * Created by sehuaqi on 2017/6/24.
 */
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");


function initContain(h) {
    document.getElementById("myCanvas").height=h;

    cxt.fillStyle="#FFFFFF";
    cxt.fillRect(0,0,450,h);

    cxt.strokeStyle="#757575";
    cxt.moveTo(224,0);
    //cxt.lineTo(249,10);
    cxt.lineTo(224,h);
    cxt.stroke();
}

//    //第一个节点开始
//    cxt.fillStyle="#000000";
//    cxt.beginPath();
//    cxt.arc(224,40,10,0,Math.PI*2,true);
//    cxt.closePath();
//    cxt.fill();
//
//    //描述框
//    cxt.beginPath();
//    cxt.moveTo(250,20);//从点(160,160)开始
//    cxt.lineTo(400,20);
//    cxt.lineTo(400,60);
//    cxt.lineTo(250,60);
//
//    cxt.lineTo(240,40);
//
//    cxt.lineTo(250,20);
//    cxt.closePath();
//
//    cxt.fill();
//
//    //时间
//    cxt.font="24px Arial";
//    cxt.fillText("7:15",140,50);
//
//    //描述内容
//    cxt.font="16px 微软雅黑";
//    cxt.fillStyle="#FFFFFF";
//    cxt.fillText("起床了 刷牙洗脸",255,45);



//----------------------------------下一个节点--------------------------------//
//    cxt.fillStyle="#000000";
//    cxt.beginPath();
//    cxt.arc(224,240,10,0,Math.PI*2,true);
//    cxt.closePath();
//    cxt.fill();
//
//
//    //描述框
//    cxt.beginPath();
//    cxt.moveTo(250,220);
//    cxt.lineTo(400,220);
//    cxt.lineTo(400,260);
//    cxt.lineTo(250,260);
//
//    cxt.lineTo(240,240);
//
//    cxt.lineTo(250,220);
//    cxt.closePath();
//
//    cxt.fill();
//
//    //时间
//    cxt.font="24px Arial";
//    cxt.fillText("5:15",140,250);
//
//    //描述内容
//    cxt.font="16px 微软雅黑";
//    cxt.fillStyle="#FFFFFF";
//    cxt.fillText("醒了 玩手机",255,245);



//----------------------------------下一个节点--------------------------------//
//    rightTimes(0,"8:15","起床洗脸刷牙了");
//    rightTimes(2,"7:55","写个自己想要的APP");
//    rightTimes(4,"5:15","听歌曲");

function rightTimes(index,time,text) {

    var textLength = text.length;

    cxt.fillStyle = "#37ad1b";
    cxt.beginPath();
    cxt.arc(224, 40 + 100 * index, 10, 0, Math.PI * 2, true);
    cxt.closePath();
    cxt.fill();


    //描述框
    cxt.beginPath();
    cxt.moveTo(250, 20 + index * 100);
    cxt.lineTo(275 + textLength * 15, 20 + index * 100);
    cxt.lineTo(275 + textLength * 15, 60 + index * 100);
    cxt.lineTo(250, 60 + index * 100);

    cxt.lineTo(240, 40 + index * 100);

    cxt.lineTo(250, 20 + index * 100);
    cxt.closePath();

    cxt.fill();

    //时间
    cxt.font = "24px Arial";
    cxt.fillText(time, 140, 50  + index * 100);

    //描述内容
    cxt.font = "normal small-caps normal 16px 微软雅黑";
    cxt.fillStyle = "#FFFFFF";
    cxt.fillText(text, 255, 45  + index * 100);
}


//------------------另一边1------------------//
//    cxt.fillStyle="#000000";
//    cxt.beginPath();
//    cxt.arc(224,140,10,0,Math.PI*2,true);
//    cxt.closePath();
//    cxt.fill();
//
//
//    //描述框
//    cxt.beginPath();
//    cxt.moveTo(70,120);
//    cxt.lineTo(198,120);
//    cxt.lineTo(208,140);
//    cxt.lineTo(198,160);
//
//    cxt.lineTo(70,160);
//
//    cxt.lineTo(70,120);
//    cxt.closePath();
//
//    cxt.fill();
//
//    //时间
//    cxt.font="24px Arial";
//    cxt.fillText("5:15",260,150);
//
//    //描述内容
//    cxt.font="16px 微软雅黑";
//    cxt.fillStyle="#FFFFFF";
//    cxt.fillText("醒了 玩手机",105,145);

//    leftTimes(1,"5:15","醒了，玩手机哈哈哈哈");
//    leftTimes(3,"19:05","到家了");
//    leftTimes(5,"22:30","和爸妈聊天结束了");

//----------------- 改成函数------------------//
function leftTimes(index,time,text) {

    //alert(text.length);
    var textLength = text.length;

    cxt.fillStyle="#aa257e";
    cxt.beginPath();
    cxt.arc(224,40 + index * 100,10,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();


    //描述框
    cxt.beginPath();
    cxt.moveTo(160 - 14 * textLength,20 + index * 100);
    cxt.lineTo(198,20 + index * 100);
    cxt.lineTo(208,40 + index * 100);
    cxt.lineTo(198,60 + index * 100);

    cxt.lineTo(160 -14 * textLength,60 + index * 100);

    cxt.lineTo(160 -14 * textLength,20 + index * 100);
    cxt.closePath();

    cxt.fill();

    //时间
    cxt.font="24px Arial";
    cxt.fillText(time,260,50 + index * 100);

    //描述内容
    cxt.font="16px 微软雅黑";
    cxt.fillStyle="#FFFFFF";
    cxt.fillText(text,170 -14 * textLength,45 + index * 100);
}

var totalIndex=10;

var data = [
    {"t":"今天","c":"我们开始吧"},
    {"t":"2017","c":"我面世了"},
    {"t":"1993","c":"我出生了"},
    {"t":"1992","c":"我的小宇宙在不停翻滚"},
    {"t":"0000","c":"我还不知道在哪里"}
];

loadXMLDoc();
function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            console.info("==>" + xmlhttp.responseText);
            data = eval("("+xmlhttp.responseText+")");
            drawTimerShaft(data);
        }
    }
    xmlhttp.open("GET","/queryTimershaft",true);
    xmlhttp.send();
}

function insertTimer(t,c) {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            console.info("+++>" + xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST","/addTimershaft/"+t+"/"+c,true);
    xmlhttp.send();
}

// drawTimerShaft(data);

function drawTimerShaft(data){
    totalIndex = data.length;
    initContain(100 * totalIndex);

    for(i=0;i<totalIndex;i++){

        if(i%2==0){
            rightTimes(i,data[i].t,data[i].c);
        }else{
            leftTimes(i,data[i].t,data[i].c);
        }
        //rightTimes(0 + (i*8),"8:15","起床洗脸刷牙了");
//        rightTimes(2 + (i*8),"7:55","写个自己想要的APP");
//        rightTimes(4 + (i*8),"5:15","听歌曲");
//        rightTimes(6 + (i*8),"5:15","风吹麦浪");
//
//        leftTimes(1 + (i*8),"5:15","醒了，玩手机哈哈哈哈");
//        leftTimes(3 + (i*8),"19:05","到家了");
//        leftTimes(5 + (i*8),"22:30","和爸妈聊天结束了");
//        leftTimes(7 + (i*8),"22:30","远处蔚蓝天空下" + i);
    }
}


var operatorBtn = document.getElementById("operatorBtn");
//console.info(operatorBtn);

operatorBtn.addEventListener("click",abc,false);

function abc() {
    //alert("记录一点");
    document.getElementById("addTime").style.display="block";
}

var submitTime = function(e){
    console.log("提交数据："+addTimeInput.value);
    if(addTimeInput.value){
        var date = new Date();

        data.unshift({"t":date.getHours()+":"+date.getMinutes(),"c":addTimeInput.value});
        console.info(data);

        insertTimer(data[0].t,data[0].c);
        //重新画
        drawTimerShaft(data);



        addTimeInput.value = "";
    }
    document.getElementById("addTime").style.display="none";
}

var addTimeInput = document.getElementById("addTimeInput");
addTimeInput.onkeydown = function(e){
    if(!e){
        e = window.event;
    }
    if((e.keyCode || e.which) == 13){
        submitTime();
    }
};

var okBtn = document.getElementById("okBtn");
okBtn.onclick = submitTime;

var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
    document.getElementById("addTime").style.display="none";
}